<template>
  <div>
    <div>
      <div v-if="fileList" class="filebox ks-row-middle bgwh">
        <div :title="fileList" class="g3 ks-col ell f14">{{ fileList }}</div>
      </div>
    </div>
    <el-upload
      v-show="!disabled"
      class="dib"
      action=""
      accept=""
      :show-file-list="false"
      :http-request="handleHttpRequest"
    >
      <el-button icon="el-icon-upload2">上传</el-button>
    </el-upload>
  </div>
</template>
<script>
import {
  postMiniAppUploadFile,
  postOfficialaccountsUploadFile,
  postWorkwxUploadFile,
} from "@/api/plugin";
export default {
  props: {
    type: {
      default: "minapp",
      type: String,
    },
    disabled: { default: false, type: Boolean },
    value: {
      default: "",
      type: String,
    },
  },
  data() {
    return {
      fileList: "",
    };
  },
  watch: {
    value: {
      handler: function (value) {
        if (value) {
          this.fileList = value;
        } else {
          this.fileList = "";
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    async handleHttpRequest(value) {
      let file = value.file;
      const formData = new FormData();
      formData.append("file", file);
      let fun =
        this.type === "minapp"
          ? postMiniAppUploadFile
          : this.type === "officialaccounts"
          ? postOfficialaccountsUploadFile
          : postWorkwxUploadFile;
      let data = await fun(formData);
      this.fileList = data;
      this.$emit("input", data);
    },
  },
};
</script>
<style lang="scss" scoped>
.uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.filebox {
  width: 484px;
  height: 28px;
  border-radius: 2px;
  padding: 0 8px;
  background: #f4f9ff;
  margin-bottom: 8px;
}
</style>
